<template>
	<view class="nav-box" :style="{ height: height + 'px', background: bgColor, width: '100%', position: 'fixed', 'z-index': index }">
		<!-- 自定义导航栏 -->
		<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"><!-- uni-ui这里是状态栏 --></view>
		<!-- 胶囊位置信息 -->
		<view class="nav-main flex align-center justify-center" :style="{ height: navBarHeight + tabHeight + 'px' }">
			<!-- 				<view class="nav-main-back" @click="back" v-if="backIcon">
					<uni-icons type="back" size="26" color="#fff"></uni-icons>
				</view>
				<text class="nav-main-title">{{title}}</text> -->
			<view class="" style="width: 100%;background: #fff;"><slot></slot></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'topbar',
	props: {
		bgColor: {
			type: String,
			default: '#fff'
		},
		backIcon: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ''
		},
		index: {
			type: Number,
			default: 44
		},
		tabHeight: {
			type: Number,
			default: 0
		}
	},
	globalData: {
		systemHeight: 60
	},
	data() {
		return {
			//总高度
			height: 0,
			//胶囊位置信息
			menuButtonRect: {},
			//状态栏的高度
			statusBarHeight: 0,
			//导航栏的高度
			navBarHeight: 0,

			list1: [
				{
					name: '为你推荐'
				},
				{
					name: '圈本圈'
				}
			]
		};
	},
	created() {
		// this.height = wx.getStorageSync('navBarHeight')
		this.getHeight();
	},
	methods: {
		//获取屏幕导航栏高度
		getHeight() {
			if (wx.canIUse('getMenuButtonBoundingClientRect')) {
				let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
				this.statusBarHeight = sysInfo.statusBarHeight;
				// 胶囊位置信息
				let rect = wx.getMenuButtonBoundingClientRect();
				this.menuButtonRect = JSON.parse(JSON.stringify(rect));
				// 导航栏高度
				let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
				this.navBarHeight = navBarHeight;
				// 自定义导航栏的高度
				this.height = sysInfo.statusBarHeight + navBarHeight;
				getApp().globalData.systemHeight = sysInfo.statusBarHeight + navBarHeight;
			} else {
				wx.showToast({
					title: '您的微信版本过低，界面可能会显示不正常',
					icon: 'none',
					duration: 4000
				});
			}
		},
		//返回
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
.status_bar {
	// height: var(--status-bar-height);
	width: 100%;
	// background:#ff0;
}

.nav-main {
	position: relative;

	// background:#f00;
	.nav-main-back {
		position: absolute;
		left: 10rpx;
	}

	.nav-main-title {
		color: #fff;
		font-size: 16px;
	}
}
</style>
